<template>
 
  <div style="width: 100%;height: 100%;text-align: center;">
    
   <div id="economicAnalysisMain" class="our-service-sass hide-pr show-pr">
     <div style="margin-top: 5%; " class="container">
      
        <h3 style="color: #f2f2f2;">输氢方案选型</h3>
        <div style="width: 68%;margin: 0 auto;border-bottom: 1px solid rgb(129 168 227);"></div>
  
      
       <div class="inner-wrapper">
         <div style="display: inline-flex;width: 100%;margin: 4vh auto;margin-left: 17vh;" class="row">
           <div style="cursor: pointer;" @click="jumpToPage('trailerHydrogenTransport')" class="col-lg-4 single-block aos-init aos-animate" data-aos="fade-up">
             <div class="service-block">
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <div class="hover-content"></div>
               <i class="flaticon-web user"></i>
               <h5 class="title"><a href="#">长管拖车输氢</a></h5>
               <p>Hydrogen transportation by tube trailers</p>
               <a class="detail-button"><i class="icon-img"><img src="../../assets/images/yqc.png" width="100%"></i></a>
             </div> <!-- /.service-block -->
           </div> <!-- /.single-block -->
           <div style="cursor: pointer;" @click="jumpToPage('pipelineHydrogenTransport')" class="col-lg-4 single-block aos-init aos-animate" data-aos="fade-up" data-aos-delay="300">
             <div class="service-block">
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <span class="snow-dot"></span>
               <div class="hover-content"></div>
               <i class="flaticon-value icon-s"></i>
               <h5 class="title"><a href="#">纯氢管道输氢</a></h5>
               <p>Hydrogen transportation by hydrogen pipeline</p>
               <a href="#" class="detail-button"><i class="icon-img"><img src="../../assets/images/gd.png"  width="100%"></i></a>
             </div> <!-- /.service-block -->
           </div> <!-- /.single-block -->
         </div> <!-- /.row -->
       </div> <!-- /.inner-wrapper -->
     </div> <!-- /.container -->
 
 
       
     
   
   </div>
    
   <div style="margin-left: 1vh;margin-right: 1vh;top: 9.9%; width: 99%;height: auto;float: left;position: absolute;">
     <router-view :key="activeDate"></router-view>
   </div>
 
 </div>
 
 </template> 
 
 <script>
     
     import '../../assets/js/script.js';
     import '../../assets/css/economicAnalysisMainStyle.css';
     import '../../assets/css/bootstrap.min.css';
 
    export default {
     name: 'economicAnalysisMain',
     data(){
       return{
         activeDate:'',
         projectId : ""
       }
     },
     mounted : function(){
       //获取项目id
       this.projectId = this.$route.query.projectId;
      
       this.activeDate = new Date().getTime();
     },
     methods:{
       
       jumpToPage : function(pageName){
          
         
         this.activeDate = new Date().getTime();
 
 
         //路由跳转  
         this.$router.push({path:'/'+pageName,query:{"type":pageName,"projectId":this.projectId}})

 
 
       }
 
     }
   }
 </script>
 <style scoped>


.icon-img img
{
  border-radius: 5%;
    padding: 5px;
    background-color: #ffffff00;
}
 

 @media (min-width: 1200px) {
     .container {
         /* max-width: 1140px; */
         /* width: 20vh; */
     }
 }
 
 @media (min-width: 1200px) {
     .container {
         /* max-width: 1140px; */
     }
 }
 
 @media (min-width: 992px) {
     .container {
         max-width: 960px;
     }
 }
 
 @media (min-width: 768px) {
     .container {
         /* max-width: 720px; */
     }
 }
 
 @media (min-width: 576px) {
     .container {
         /* max-width: 540px; */
     }
 }
 
 </style>
 